<template>
  <div class="list-box">
    <el-row id="nodeparentbox" :gutter="0" type="flex" align="top">
      <el-col v-bind:style="{'height':mpheight,'overflow-x': 'hidden'}" class="tpdivlist samehl hidden-sm-and-down" id="menulistbox" :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
        <div class="rightline-box nodemenubox" v-bind:style="{'height':mheight,'margin-top':mtp}">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{menus.title}}</span>
            </div>
            <el-row class="tac">
              <el-col :span="24">
                <el-menu
                  default-active="1"
                  @close="handleClose"
                >
                  <!-- 一级标题 -->
                  <template :v-if="menus.children!==undefined && menus.children.length>0">
                    <div v-for="(oitem,oindex) in menus.children" :key="oitem.id">
                      <el-submenu v-if="oitem.children!==undefined && oitem.children.length>0" :index="(oindex+1)+''">
                        <template slot="title">
                          {{oitem.title}}
                        </template>

                        <!-- 二级标题 -->
                        <div v-for="(titem,tindex) in oitem.children" :key="titem.id">
                          <el-submenu v-if="titem.children!==undefined && titem.children.length>0" :index="(oindex+1)+'-'+(tindex+1)">
                            <template slot="title">{{titem.title}}</template>
                            <!-- 三级标题 -->
                            <div v-for="(thitem,thindex) in titem.children" :key="thitem.id">
                              <el-menu-item v-if="thitem.children!==undefined  && thitem.children.length>0" :index="(oindex+1)+'-'+(tindex+1)+'-'+(thindex+1)">
                                <template slot="title">{{thitem.title}}</template>
                                <!-- 四级标题 -->
                                <div v-for="(fitem,findex) in thitem.children" :key="fitem.id">
                                  <el-menu-item :index="(oindex+1)+'-'+(tindex+1)+'-'+(thindex+1)+'-'+(findex+1)">{{fitem.title}}</el-menu-item>
                                </div>
                              </el-menu-item>
                              <el-menu-item v-else :index="(oindex+1)+'-'+(tindex+1)+'-'+(thindex+1)">{{thitem.title}}</el-menu-item>
                            </div>
                          </el-submenu>
                          <el-menu-item v-else :index="(oindex+1)+'-'+(tindex+1)">{{titem.title}}</el-menu-item>
                        </div>
                      </el-submenu>
                      <el-menu-item v-else :index="(oindex+1)+''">{{oitem.title}}</el-menu-item>
                    </div>
                  </template>
                </el-menu>
              </el-col>
            </el-row>
          </el-card>
          <div class="linebox"></div>
        </div>
      </el-col>
      <!-- <el-col class="codebox" v-highlight v-html="node.htmlContent" :xs="24" :sm="24" :md="16" :lg="16" :xl="16"> -->
      <el-col class="codebox" :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
        <div class="title-header-box">
          <div class="header-title">{{course.courseName}}</div>
          <div class="header-text">{{course.description}}</div>
        </div>
        <div class="line-numbers" v-html="node.htmlContent"></div>
      </el-col>
      <el-col v-bind:style="{'height':mpheight,'overflow-x': 'hidden'}" class="courseinfobox samehl hidden-sm-and-down" :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
        <div class="rightline-box" v-bind:style="{'height':mheight,'margin-top':mtp}">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>更多章节</span>
            </div>
            <div v-for="(nd,index) in nodes" :key="index" class="updatelist">
              <nuxt-link :to="'/view/'+nd.id">
                <div class="menutitle">
                  <span>{{index+1}}.</span>
                  {{nd.nodeName}}
                </div>
                <div class="menutitlecount">
                  <i class="mtc color1 el-icon-view" />
                  {{nd.viewCount}}人
                </div>
              </nuxt-link>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Prism from 'prismjs';
export default {
  layout:'view',
  data() {
    return {
      mheight:'0px',
      mtp:'0px',
      mpheight:'0px'
    };
  },
  mounted () {
    if (process.browser) {
      let that = this;
      that.mpheight = (document.getElementById('nodeparentbox').clientHeight-15)+'px'
      window.fullHeight = document.documentElement.clientHeight;
      that.mheight = window.fullHeight+'px'; // 高
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.mheight = window.fullHeight+'px';
          that.mpheight = (document.getElementById('nodeparentbox').clientHeight-15)+'px'
        })()
      };
      //滚动条机监听
      window.addEventListener('scroll',function(){
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        that.mtp=(scrollTop)+'px'
        //that.mtp='65px'
      })
    }
  },
  methods: {
    handleClose(key, keyPath) {
      this.$refs.menus.open(keyPath);
    }
  },
  async asyncData({ app }) {
    //课程信息查询
    const result = await app.$axios.$get(
      `/course/node/view/${app.context.route.params.id}`
    );
    return result;
  }
};
</script>
<style>
code {
    font-size: .875em;
    color: #d63384;
    word-wrap: break-word;
}
.nodemenubox{
  overflow: hidden;
  overflow-y: auto;
}
.tpdivlist{
  height: 100vh;
}
.courseinfobox{
  overflow: hidden;
}
#menulistbox{
  overflow-y: hidden;
}
.nodemenubox .el-card__body{
  padding: 0px !important;
}
</style>